<template>
   <NavBar></NavBar>
   <ContentField>
    <h2 style="text-align:center;margin-bottom: 10px;">{{classId}}班详细信息</h2>
    <router-link class="btn btn-sm btn-success" style="width: 13%; margin-left:2%;" :to="{name: 'addStudent', params: {classId: classId}}">添加学生</router-link>
    <router-link class="btn btn-sm btn-success" style="width: 13%; margin-left: 70%; margin-right: 2%;" :to="{name: 'T_classSet', params: {classId: classId}}">班级题集</router-link>

    <div class="container text-center" style="margin-top: 15px;margin-left:2%; margin-right:2%; width: 96%; height:40px; line-height:40px; border: 1px solid;">
    <div class="row">
        <div class="col">
            <div class="col" >班级id: {{classId}}</div>
        </div>
        <div class="col">
            <div class="col" >学生人数: {{cnt}}</div>
        </div>
        <div class="col">
            <div class="col" >教师id: {{tid}}</div>
        </div>
    </div>
    </div>
    

    <ContentField>
        <table class="table  table-primary  table-striped table-hover" style="margin-bottom: 10px;">
            <thead class="table-dark text-center" >
                <tr>
                <th scope="col">id</th>
                <th scope="col">学生id(studentId)</th>
                <th scope="col">学生姓名(name)</th>
                <th scope="col">班级id(cid)</th>
                </tr>
            </thead>
            <tbody class="text-center">
              <tr v-for=" (item, index) in students" :key="item.id">
                    <th>{{ index + 1 }}</th>
                    <td>{{ item.studentId }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.cid }}</td>
              </tr>
            </tbody>
        </table>

    <span aria-label="Page navigation example">
        <ul class="pagination" style="float:left">
            <li class="page-item disabled">
                <a class="page-link">每页&nbsp;&nbsp;<span style="color:blue;">{{ pageSize }}</span>&nbsp;&nbsp;条数据</a>
            </li>
            <li class="page-item disabled">
                <a class="page-link" :pageNum="pageNum">当前为第&nbsp;&nbsp;<span style="color:blue;">{{ pageNum }}</span>&nbsp;&nbsp;页</a>
            </li>
            <li class="page-item disabled">
                <a class="page-link">总共&nbsp;&nbsp;<span style="color:blue;">{{ totalPage }}</span>&nbsp;&nbsp;页</a>
            </li>
        </ul>

        <ul class="pagination" style="float:right">
            <li class='page-item'>
                <a v-if="isFirstPage" class="page-link disabled">上一页</a>
                <a v-else class="page-link" @click="getPage( classId,prePage,pageSize )">上一页</a>
            </li>

            <li class="page-item" v-for="(item, index) in totalPage" :key="index">
                <a  class="page-link" @click="getPage(classId, item,pageSize)">{{ item }}</a>
            </li>
            <li class= 'page-item'>
                <a  v-if="isLastPage" class="page-link disabled">下一页</a>
                <a  v-else class="page-link" @click="getPage(classId, nextPage,pageSize )">下一页</a>  
            </li>
        </ul>
    </span>

    </ContentField>
   </ContentField>
</template>

<script>

import NavBar from "@/components/teacher/NavBar.vue";
import ContentField from '@/components/commons/ContentField.vue';

import {ref} from 'vue';
import { useRoute } from 'vue-router';
import  {useStore}  from 'vuex';
import $ from 'jquery';


export default{
    name: 'classProfile',
    components: {
        NavBar,
        ContentField,
    },
    setup(){
        const route = useRoute();  //用于获取路由中的参数
        const store = useStore();
    
        let cnt = ref('');  //班级人数
        let proSetId = ref([]);  //题集
        let students = ref([]);  //学生列表
        let tid = ref('');  //班级对应教师id

        let PageNum = 1 ;  //当前页数
        let PageSize = 4 ; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页


        pageSize.value = 1;
        pageNum.value = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;

        let classId = route.params.classId;

        const getInfoByCId = (CId) => {

            $.ajax({
                url: 'http://localhost:8090/sls/class/getInfoByCId',
                type: 'get',
                data: {
                    CId: CId,
                },
                headers: {
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){
                //console.log(resp);
                cnt.value = resp.cnt;
                proSetId.value = resp.proSetrId;
                tid.value = resp.tid;
            },
            error(resp){
                console.log(resp);
            }
            });
        }
        getInfoByCId(classId);


        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getPage = (CId,PageNum,PageSize)=>{   //按页查询用户信息


            $.ajax({
            url: 'http://localhost:8090/sls/teacher/studentsInfo/' +CId + '/' + PageNum +'/' + PageSize ,
            type: "get",
            headers: {
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){
                //console.log(resp);
                students.value = resp.list; //获取所有班级信息
                totalNum.value = resp.total;
                totalPage.value = resp.pages;
                pageNum.value = resp.pageNum;
                pageSize.value = resp.pageSize;
                isFirstPage.value = resp.isFirstPage;
                isLastPage.value = resp.isLastPage;
                nextPage.value = resp.nextPage;
                prePage.value = resp.prePage;

                updatePageInfo(pageNum, pageSize);
                
            },
            error(resp){
                console.log(resp);
            }
            });
        }
        
        getPage(classId, PageNum, PageSize);

        return{
           getInfoByCId,
           updatePageInfo,
           getPage,
           classId,
           cnt,
           proSetId,
           students,
           tid,
           PageNum,
           PageSize,
           pageNum,
           pageSize,
           totalNum,
           totalPage,
           isFirstPage,
           isLastPage,
           nextPage,
           prePage,
        }
    }
}

</script>



<style scoped>

</style>




<!-- <span>
    <div class="row g-3 align-items-center">
        <span class="col-auto form-control">班级id: {{classId}} </span>
    </div>
    <div class="row g-3 align-items-center">
        <span class="col-auto form-control">班级人数: {{cnt}} </span>
    </div>
    <div class="row g-3 align-items-center">
        <span class="col-auto form-control">教师id: {{tid}} </span>
    </div>
</span> -->
<!-- <div class="container text-center">
<div class="row">
    <div class="col">
        <span class="col-auto form-control"> </span>
    </div>
    <div class="col">
        <span class="col-auto form-control"> </span>
    </div>
    <div class="col"  style="border:1px solid;">
        <span class="col-auto form-control"> </span>
    </div>
    <div class="col">
        <span class="col-auto form-control" v-if="proSetId == null">题集: 暂未添加 </span>
        <span class="col-auto form-control" v-else>题集: {{ proSetId }}</span>
    </div>
</div>
</div> -->